@(qcmForm: Form[Qcm], qcm: Qcm, allThemes: List[Theme])
@import helper._


@main("Creation QCM step 2/3 : Associer les questions aux QCM"){

<script type="text/javascript">

$(document).ready(function(){
	
	// SET Onchange function for themes
	$('#theme').on('change',function(){
		updateSelectBox('theme','matiere','http://localhost:9000/newqcm/server/listeMatiere/');
	});
	
	// SET Onchange function for matieres
	$('#matiere').on('change',function(){
		updateSelectBox('matiere','chapitre','http://localhost:9000/newqcm/server/listeChapitre/');
	});
	
	// SET Onchange function for question
	$('#chapitre').on('change',function(){
		updateQuestion('chapitre','box1View','http://localhost:9000/newqcm/server/listeQuestion/');
	});
	
	$('#box1View').on('click',function(){
		commentaire('box1View','info','http://localhost:9000/newqcm/server/commentaireQuestion/');
	});
	
	$('#listeQuestions').on('click',function(){
		commentaire('listeQuestions','info','http://localhost:9000/newqcm/server/commentaireQuestion/');
	});

	$('#actione').on('click',function(){
		getSelectedValue('listeQuestions');
	});

});

function getSelectedValue(selectId){
	var values = new Array();
	var elmt = document.getElementById(selectId);
	console.log("element ="+elmt);
	for(var i=0; i< elmt.options.length; i++){
		console.log(elmt.options.length);
		html += elmt.options[i].value+';';
		console.log(elmt.options[i]);
		console.log(elmt.options[i].value);
		}
	var field = document.createElement("input");
	field.name="boxRecup";
	field.id ="boxRecup";
	console.log(boxRecup);
}

$(function() {
    $.configureBoxes();
});


function commentaire(sourceId,destId,url){
	
	//INIT 
	var html="";
	
	//GET Value
	var selectedValue = $('#'+sourceId+' option:selected').val();
	
	// SEND request
	$.get(url+selectedValue, function(data) {
			
		// FIRST Split
		var tabTemp = data.split(';');
		
			// SECOND Split
		var optionTab = tabTemp[3].split('#');
		html += '<b>Libelle : </b>'+tabTemp[0]+'</br>'+
				'<b>Niveau : </b>'+tabTemp[2]+'</br>'+	
				'<b>Commentaire : </b>'+tabTemp[1]+'</br>'+	
				'<b>Liste des choix disponibles : </b>';
				
		for(i=0;i<optionTab.length;i++){			
			// ADD to html
			html += '</br>'+'\t'+optionTab[i];

			
		}
		
		// SET New content
		$('#'+destId).html(html);
		
	});
}

function updateQuestion(sourceId,destId,url){
	//INIT 
	var html="";
	$('#box1View').html("");
	$('#info').html("");
	
	//GET Value
	var selectedValue = $('#'+sourceId+' option:selected').val();
	
	// SEND request
	$.get(url+selectedValue, function(data) {
		
		// FIRST Split
		var tabTemp = data.split(';');
		
		// BROWSE Theme
		for(i=0;i<tabTemp.length;i++){
			
			// SECOND Split
			var optionTab = tabTemp[i].split('#');
			
			// ADD to html
			//TODO : value le mettre de maniere unique id matiere+idChapitre 
			html += '<option value="'+optionTab[0]+'">'+optionTab[1]+'</option>';
			
		}
		
		// SET New content
		$('#'+destId).html(html);
	
	});
}



function updateSelectBox(sourceId,destId,url){
	
	// INIT
	var html = '<option selected="selected" >Choissez dans la liste</option>';
	$('#box1View').html("");
	$('#info').html("");
	
	// GET Value
	var selectedValue = $('#'+sourceId+' option:selected').val();
	if (sourceId == "theme"){$('#chapitre').html(html);}
	
	// SEND request
	$.get(url+selectedValue, function(data) {
		
		// FIRST Split
		var tabTemp = data.split(';');
		
		// BROWSE Theme
		for(i=0;i<tabTemp.length;i++){
			
			// SECOND Split
			var optionTab = tabTemp[i].split('#');
			
			// ADD to html
			html += '<option value="'+optionTab[0]+'">'+optionTab[1]+'</option>';
			
		}
		
		// SET New content
		$('#'+destId).html(html);
	
	});
	
}

</script>
@helper.form(action = routes.CreateQCM.submit(2)) {
<fieldset>
		<legend>Initialisation :</legend>
		<div>
					<h6>Libell&eacute : </h6> @qcmForm("libelle").value
					<h6>Date Ouverture :</h6> @qcm.getDateOuverture().format("dd/MM/yyyy HH:mm")
					<h6>Date Cloture : </h6> @qcm.getDateCloture().format("dd/MM/yyyy HH:mm")
					<p></p>
				</div>
		
			<legend>Ajouter des Question</legend>
				<label>Theme : </label>
					<select name="theme" id ="theme">
					<option selected="selected" >Choissez dans la liste</option>
					@for(theme <- allThemes){
					<option  value=@theme.getIdTheme()>@theme.getLibelleT()</option>
					}
					</select>
				
				<label>Matiere : </label>
					<select name="matiere" id="matiere">
					<option selected="selected" ></option>
				</select>
				
				<label>Chapitre : </label>
					<select id="chapitre" name="chapitre" >
					<option selected="selected"></option>
				</select>
				
				<label>Question : </label>
					<div class="container-fluid">				                   
					   <table>
					           <tr>
					               <td>
					                       Filter: <input type="text" id="box1Filter" /><button type="button" id="box1Clear">X</button><br />
					                       <select id="box1View" multiple="multiple" style="height:300px;width:400px;">
					                           <option selected="selected"></option>
					                       </select><br/>
					                        <span id="box1Counter" class="countLabel"></span>
					                      <select id="box1Storage">
					                       </select>
					               </td>
					               <td>
					                   <button id="to2" type="button">&nbsp;>&nbsp;</button>
					                   <button id="allTo2" type="button">&nbsp;>>&nbsp;</button>
					                   <button id="allTo1" type="button">&nbsp;<<&nbsp;</button>
					                   <button id="to1" type="button">&nbsp;<&nbsp;</button>
					               </td>
					               <td>
					                   Filter: <input type="text" id="box2Filter" /><button type="button" id="box2Clear">X</button><br />
					                   <select name="listeQuestions[]"  id="listeQuestions"  multiple="multiple" style="height:300px;width:400px;">
					                   </select><br/>
				                   
					                   <span id="box2Counter" class="countLabel"></span>
					                   
					                   </select>
					               </td>
					               
					           </tr>
					       </table>
					       <p></p>
					 		<div id="info" style="border:solid 2px blue";></div>
					     </div>
<p></p>
				
	
</fieldset>
<input type="hidden" name="libelle" value="@qcmForm("libelle").valueOr("")">
<input type="hidden" name="dateOuverture" value="@qcm.getDateOuverture().format("dd/MM/yyyy HH:mm")">
<input type="hidden" name="dateCloture" value="@qcm.getDateCloture().format("dd/MM/yyyy HH:mm")">
		<input type="hidden"  type="text" name="ppf" id="ppf"value="@qcmForm("ppf").valueOr("")">
		<input type="hidden"  type="text" name="pnf" id="pnf"value="@qcmForm("pnf").valueOr("")">
		<input type="hidden"  type="text" name="ppm" id="ppm"value="@qcmForm("ppm").valueOr("")">
		<input type="hidden"  type="text" name="pnm" id="pnm"value="@qcmForm("pnm").valueOr("")">
		<input type="hidden"  type="text" name="ppd" id="ppd"value="@qcmForm("ppd").valueOr("")">
		<input type="hidden"  type="text" name="pnd" id="pnd"value="@qcmForm("pnd").valueOr("")">
		<input type="hidden"  type="text" name="ppb" id="ppb"value="@qcmForm("ppb").valueOr("")">
		<input type="hidden"  type="text" name="pnb" id="pnb"value="@qcmForm("pnb").valueOr("")">
             
 <div class="actions"> 	
     	<button id="action" type="submit" name="action" value="retour" class="btn btn-primary">
			Retour <i class="icon-white icon-circle-arrow-left"></i> 
		</button>
		
       	<button id="action" type="submit" name="action" value="valider"class="btn btn-primary">
			Valider <i class="icon-white icon-circle-arrow-right"></i>
		</button>
</div>
}
}
